<template   >
  <div class="container">
    <h1>轮播图</h1>
    <img :src="qwe[index]" alt="" />
    <div class="box6">
      <i
        style="
          position: absolute;
          left: 10px;
          top: 260px;
          color: #666;
          font-size: 40px;
          color: #fff;
        "
        @click="fun"
        id="i1"
        >&lt;</i
      >
      <i
        style="
          position: absolute;
          right: 10px;
          top: 260px;
          color: #666;
          font-size: 40px;
          color: #fff;
        "
        @click="fun1"
        id="i2"
        >></i
      >
    </div>
    <div class="box4">
      <p class="p1"></p>
      <p class="p2"></p>
      <p class="p3"></p>
      <p class="p4"></p>
      <p class="p5"></p>
    </div>
  </div>
</template>
<style scoped>
.container {
  width: 800px;
  height: 530px;
  /* border: 1px solid#000; */
  margin: auto;
  position: relative;
}

#img1 {
  width: 1000px;
}

i {
  cursor: pointer;
}

h1 {
  text-align: center;
}
</style>
<script>
export default {
  data() {
    return {
      qwe: [
        require("../imgs/1.jpg"),
        require("../imgs/2.jpg"),
        require("../imgs/3.jpg"),
        require("../imgs/4.jpg"),
        require("../imgs/5.jpg"),
      ],
      index: 0,
    };
  },
  methods: {
    fun() {
      this.index = this.index == 0 ? 4 : this.index-1;
      this.qwe[this.index-1];
    },
    fun1() {
      this.index = this.index == 4 ? 0 : this.index+1;
      this.qwe[this.index+1];
    },
    time() {
      setInterval(this.fun3, 2000);
    },
    fun3() {
      this.index = this.index == 4 ? 0 : this.index+1;
      this.qwe[this.index+1];
    },
  },
  mounted: function () {
    this.time();
  },
};
</script>

